import { Container, Grid, Card, Typography, Box, Chip, Skeleton } from '@mui/material';
import { useState, useEffect } from 'react';
// 确认使用默认导入
import api from '../services/api';

export default function Home() {
  const [user, setUser] = useState(null);
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 并行获取用户信息和项目列表
        const [
          /*userData,*/
           projectsData] = await Promise.all([
          // api.getUser('1'),
          api.getProjects()
        ]);
        setUser({
          "id": "1",
          "name": "九色鹿",
          "bio": "全栈开发架构师"
        });
        setProjects(projectsData.slice(0, 4));

      } catch (error) {
        console.error('数据获取失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div className="container mx-auto p-4">
      <Container maxWidth="lg" sx={{ py: 8, px: 4 }}>
            {/* 个人简介 */}
            <Box sx={{ 
              p: 6, 
              mb: 8, 
              bgcolor: 'background.paper',
              borderRadius: 2,
              boxShadow: 2
            }}>
              {loading ? (
                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <Skeleton variant="text" width={300} height={40} />
                  <Skeleton variant="text" width={500} height={20} />
                </Box>
              ) : (
                <> 
                  <Typography variant="h2" align="center" gutterBottom>
                    你好，我是{user?.name}
                  </Typography>
                  <Typography variant="h6" align="center" color="text.secondary">
                    {user?.bio} <br />
                    擅长React、Go语言，熟悉Docker容器化部署
                  </Typography>
                </>
              )}
            </Box>

            {/* 技能标签 */}
            <Box sx={{ 
              p: 4, 
              mb: 8,
              bgcolor: 'background.paper',
              borderRadius: 2,
              boxShadow: 2
            }}>
              <Typography variant="h4" gutterBottom>技能栈</Typography>
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
                <Chip label="React" color="primary" clickable />
                <Chip label="Go" color="primary" clickable />
                <Chip label="Docker" color="primary" clickable />
                <Chip label="PostgreSQL" color="primary" clickable />
                <Chip label="Redis" color="primary" clickable />
              </Box>
            </Box>

            {/* 项目展示 */}
            <Box sx={{ 
              p: 4,
              bgcolor: 'background.paper',
              borderRadius: 2,
              boxShadow: 2
            }}>
              <Typography variant="h4" gutterBottom>近期项目</Typography>
              {loading ? (
                <Grid container spacing={4}>
                  {[1, 2, 3, 4].map((i) => (
                    <Grid item key={i} xs={12} md={6} lg={4}>
                      {/* 图片骨架屏 */}
                      <Skeleton variant="rectangular" height={200} sx={{ borderRadius: 1 }} />
                      <Card sx={{ height: '100%' }}>
                        <Box sx={{ p: 4 }}>
                          <Skeleton variant="text" width="60%" sx={{ mt: 2 }} />
                          <Skeleton variant="text" width="100%" sx={{ mt: 1 }} />
                          <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
                            <Skeleton variant="rectangular" width={60} height={24} />
                            <Skeleton variant="rectangular" width={80} height={24} />
                          </Box>
                        </Box>
                      </Card>
                    </Grid>
                  ))}
                </Grid>
              ) : (
                <Grid container spacing={4} xs={6}>  {/* 减小间距为2 */}
                  {projects.map((project) => (
                    <Card key={project.id}
                      sx={{ 
                        width: '48%',
                        height: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        transition: 'all 0.3s',
                        '&:hover': {
                          transform: 'translateY(-4px)',
                          boxShadow: 4
                        }
                      }}
                    >
                      {/* 添加项目图片 */}
                      <Box sx={{ height: 200, overflow: 'hidden' }}>
                        <img 
                          src={project.image} 
                          alt={project.title} 
                          style={{ 
                            width: '100%', 
                            height: '100%', 
                            objectFit: 'cover', 
                            transition: 'transform 0.3s ease'
                          }} 
                          onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'} 
                          onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
                        />
                      </Box>
                      <Box sx={{ p: 3 }}>
                        <Typography variant="h5" gutterBottom>
                          {project.title}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {project.description}
                        </Typography>
                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }}>
                          {/* {project.tags.map((tag, i) => (
                            <Chip key={i} label={tag} size="small" />
                          ))} */}
                        </Box>
                      </Box>
                    </Card>
                  ))}
                </Grid>
              )}
            </Box>
          </Container>
    </div>
  );
}